<template lang="pug">
  .CreateRoleModal
    Modal(
      v-model="isShowCreateRoleModal"
      :title="createRoleModalTitle"
      class-name="vertical-center-modal"
    )
      Form.ivu-row(ref="formData" :model="formData" :rules="rules" :label-width="100")
        FormItem.form-item.ivu-col(v-for="(item, index) of formItem" :label="item.label" :key="index" :class="item.style" :prop="item.prop")
          template(v-if="item.type === 'text'")
            .line-h-30 {{formData[item.model]}}
          template(v-if="item.type === 'input'")
            Input(v-model="formData[item.model]" :placeholder="item.placeholder")
          template(v-if="item.type === 'select'")
            Select(v-model="formData[item.model]" :placeholder="item.placeholder" @on-change="listenCall(item.fn, formData[item.model])" multiple v-if="item.model === 'productTypeArr'")
              Option(v-for="(c_item, c_index) of arrListDown[item.options]" :key="c_index" :value="+c_item.value") {{c_item.text}}
            Select(v-model="formData[item.model]" :placeholder="item.placeholder" @on-change="listenCall(item.fn, formData[item.model])" v-else)
              Option(v-for="(c_item, c_index) of arrListDown[item.options]" :key="c_index" :value="+c_item.value") {{c_item.text}}
          template(v-if="item.type === 'switch'")
            i-switch(v-model="formData[item.model]")
          template(v-if="item.type === 'tree'")
            Tree.h200.overflow-y-scroll(:data="permissionList" ref="tree" show-checkbox check-directly @on-check-change="treeCheckChange")
      .clearfix(slot="footer")
        Button(type="text" @click="cancel") 取消
        Button(type="primary" @click="handleSave") 保存
</template>

<script>
import { Common } from '@/utils/common.js'
import { RoleApi } from '@/api/Role.api.js'
export default {
  name: 'CreateRoleModal',

  watch: {
  },

  data () {
    return {
      isShowCreateRoleModal: false,
      createRoleModalTitle: '',
      roleId: '',
      formData: {
        id: '',
        name: '',
        dataAccessRoleType: '',
        operationRoleType: '',
        productType: '',
        productTypeArr: [],
        isFixInsuredNo: false,
        enabled: true,
        permissionIdList: ''
      },
      formItem: [
        { type: 'input', label: '角色名称', placeholder: '请输入角色名称', prop: 'name', model: 'name', style: 'ivu-col-span-24' },
        { type: 'select', label: '数据权限', placeholder: '请选择数据权限', prop: 'dataAccessRoleType', model: 'dataAccessRoleType', style: 'ivu-col-span-24', options: 'dataAccessRoleTypeList', fn: 'selectChange' },
        { type: 'select', label: '角色分类', placeholder: '请选择角色分类', prop: 'operationRoleType', model: 'operationRoleType', style: 'ivu-col-span-24', options: 'operationRoleTypeList', fn: 'selectChange' },
        { type: 'select', label: '产品类型', placeholder: '请选择产品类型', prop: 'productTypeArr', model: 'productTypeArr', style: 'ivu-col-span-24', options: 'productTypeSource', fn: 'selectChange' },
        { type: 'switch', label: '是否指定编号', placeholder: '', prop: 'isFixInsuredNo', model: 'isFixInsuredNo', style: 'ivu-col-span-24' },
        { type: 'switch', label: '启用', placeholder: '', prop: 'enabled', model: 'enabled', style: 'ivu-col-span-24' },
        { type: 'tree', label: '菜单权限', placeholder: '请输入菜单权限', prop: 'permissionIdList', model: 'permissionIdList', style: 'ivu-col-span-24' }
      ],
      rules: {
        name: [
          { required: true, message: '请输入角色名称' }
        ],
        dataAccessRoleType: [
          { required: true, message: '请选择数据权限' }
        ],
        enabled: [
          { required: true, message: '请选择是否启用' }
        ]
      },
      arrListDown: {
        tempOps: [],
        dataAccessRoleTypeList: [],
        operationRoleTypeList: [],
        productTypeSource: []
      },
      permissionList: [], // 菜单权限列表
      // permissionIdList: [], // 已选中的权限id数组
      selectNode: []
    }
  },

  mounted () {
  },

  methods: {
    // 监听所有调用的方法
    listenCall (methodsWords, param) {
      this[methodsWords](param)
    },

    cancel () {
      this.isShowCreateRoleModal = false
    },

    show () {
      this.isShowCreateRoleModal = true
      this.$refs.formData.resetFields()
      this.formData.id = ''
      this.formData.productType = ''
      console.log('this.formData: ', this.formData)
    },

    // 根据ID获取角色信息
    async getModel (id) {
      var params = {
        'parameter.id': id
      }
      let res = await RoleApi.getModel(params)
      console.log('根据ID获取角色信息: ', res)
      if (res.status === 200 && res.data.success) {
        var result = res.data.data
        this.arrListDown.operationRoleTypeList = result.operationRoleTypeList // 操作类型
        this.arrListDown.dataAccessRoleTypeList = result.dataAccessRoleTypeList // 可访问的数据类型
        this.arrListDown.productTypeSource = result.productTypeSource
        this.permissionList = result.permissionList // 菜单权限列表
        // this.permissionIdList = result.detail.permissionIdList // 已选中的权限id数组
        this.selectNode = result.detail.permissionIdList // 已选中的权限id数组

        var detail = result.detail
        console.log('detail: ', detail)
        // Object.keys(this.formData).forEach(key => {
        //   this.formData[key] = detail[key]
        // })
        if (id) {
          Object.keys(this.formData).forEach(key => {
            this.formData[key] = detail[key]
          })
          this.formData.productTypeArr = detail.productType ? detail.productType.split(',').map(Number) : []
        }
        console.log('this.formData: ', this.formData)
      } else {
        this.$Message.error({
          content: resp.data.message,
          duration: 10,
          closable: true
        })
      }
    },

    // 基础数据类型改变
    async typeChange (params) {
      let res = await RoleApi.typeChange(params)
      console.log('基础数据类型改变: ', res)
      if (res.status === 200 && res.data.success) {
        Object.keys(res.data.data).forEach(key => {
          this.arrListDown[key] = res.data.data[key]
        })
      }
    },

    // 数据类型改变
    handleTypeChange (value) {
      var params = {}
      this.arrListDown.typeList.map(item => {
        if (item.key === value) {
          params.id = this.roleId
          params.TypeGUID = item.key
          this.typeChange(params)
        }
      })
    },

    selectChange (value) {
      console.log('value: ', value)
    },

    // 保存角色
    handleSave () {
      this.formData.permissionIdList = this.selectNode
      this.formData.productType = this.formData.productTypeArr.join(',')
      console.log('保存角色：', this.formData)
      this.$refs.formData.validate((valid) => {
        if (valid) {
          RoleApi.save(this.formData).then(res => {
            // console.log('保存角色res: ', res)
            if (res.status === 200 && res.data.success) {
              this.$Message.success(res.data.message)
              this.isShowCreateRoleModal = false
              this.$emit('handleSave')
            } else {
              this.$Message.error({
                content: res.data.message,
                duration: 10,
                closable: true
              })
            }
          })
        } else {
          this.$Message.warning('输入有误，请返回检查!')
        }
      })
    },

    treeCheckChange (value) {
      // console.log('value: ', value)
      var tempArr = []
      value.map(item => {
        tempArr.push(item.id)
      })
      this.selectNode = tempArr
      console.log('被勾选的节点有this.selectNode: ', this.selectNode)
    }
  }
}
</script>

<style lang="less" scoped>

</style>
